<style>
    .preview{
        width: 100%;
        text-align: center;
    }
    button.upload{
        width: 100%;
    }
    p.title {
        font-weight: bold;
    }
</style>
<div class="layui-tab layui-tab-brief tool-tab" lay-filter="tool-tab">
    <ul class="layui-tab-title text-center">
        <li class="layui-this">{$tool_info.title}</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-row">
                <blockquote class="layui-elem-quote tools-title">
                    <p>说明：</p>
                    <ol>
                        <li>这里的上传的图片是不会存储在本站的，返回的接口请自己保存，如果图片地址失效，可能被存储运营商删除，请注意您的图片重要性，以防不必要的争议。</li>
                        <li>请不要违反任何会触发中国宪法的图片，望自珍重。</li>
                    </ol>
                </blockquote>
                <fieldset class="layui-elem-field">
                    <legend>柠檬图床</legend>
                    <div class="layui-field-box">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-sm12 layui-col-md4">
                                <div class="preview">
                                    点击下方按钮选择需要上传的图片
                                </div>
                                <div class="layui-progress" lay-filter="progress_lmtc">
                                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                                </div>
                                <button type="button" data-type="lmtc" class="upload layui-btn layui-btn-primary layui-border-blue">选择上传</button>
                            </div>
                            <div class="layui-col-sm12 layui-col-md8">
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">Image URL</p>
                                    <xmp class="image-url" lay-encode="true"></xmp>
                                </div>
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">BBCode</p>
                                    <xmp class="bbcode" lay-encode="true"></xmp>
                                </div>
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">HTML</p>
                                    <xmp class="html" lay-encode="true"></xmp>
                                </div>
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">Markdown</p>
                                    <xmp class="markdown" lay-encode="true"></xmp>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="layui-elem-field">
                    <legend>百度图床</legend>
                    <div class="layui-field-box">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-sm12 layui-col-md4">
                                <div class="preview">
                                    点击下方按钮选择需要上传的图片
                                </div>
                                <div class="layui-progress" lay-filter="progress_baidu">
                                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                                </div>
                                <button type="button" data-type="baidu" class="upload layui-btn layui-btn-primary layui-border-blue">选择上传</button>
                            </div>
                            <div class="layui-col-sm12 layui-col-md8">
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">Image URL</p>
                                    <xmp class="image-url" lay-encode="true"></xmp>
                                </div>
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">BBCode</p>
                                    <xmp class="bbcode" lay-encode="true"></xmp>
                                </div>
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">HTML</p>
                                    <xmp class="html" lay-encode="true"></xmp>
                                </div>
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">Markdown</p>
                                    <xmp class="markdown" lay-encode="true"></xmp>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="layui-elem-field">
                    <legend>新浪图床</legend>
                    <div class="layui-field-box">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-sm12 layui-col-md4">
                                <div class="preview">
                                    点击下方按钮选择需要上传的图片
                                </div>
                                <div class="layui-progress" lay-filter="progress_sina">
                                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                                </div>
                                <button type="button" data-type="sina" class="upload layui-btn layui-btn-primary layui-border-blue">选择上传</button>
                            </div>
                            <div class="layui-col-sm12 layui-col-md8">
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">Image URL</p>
                                    <xmp class="image-url" lay-encode="true"></xmp>
                                </div>
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">BBCode</p>
                                    <xmp class="bbcode" lay-encode="true"></xmp>
                                </div>
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">HTML</p>
                                    <xmp class="html" lay-encode="true"></xmp>
                                </div>
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">Markdown</p>
                                    <xmp class="markdown" lay-encode="true"></xmp>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="layui-elem-field">
                    <legend>腾讯图床</legend>
                    <div class="layui-field-box">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-sm12 layui-col-md4">
                                <div class="preview">
                                    点击下方按钮选择需要上传的图片
                                </div>
                                <div class="layui-progress" lay-filter="progress_tx">
                                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                                </div>
                                <button type="button" data-type="tx" class="upload layui-btn layui-btn-primary layui-border-blue">选择上传</button>
                            </div>
                            <div class="layui-col-sm12 layui-col-md8">
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">Image URL</p>
                                    <xmp class="image-url" lay-encode="true"></xmp>
                                </div>
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">BBCode</p>
                                    <xmp class="bbcode" lay-encode="true"></xmp>
                                </div>
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">HTML</p>
                                    <xmp class="html" lay-encode="true"></xmp>
                                </div>
                                <div style="border: 1px solid #e6e6e6">
                                    <p class="title">Markdown</p>
                                    <xmp class="markdown" lay-encode="true"></xmp>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['jquery', 'layer','upload','element','code'], function () {
        var $ = layui.jquery,
            l = layui.layer,
            U = layui.upload,
            E = layui.element;

        $('.upload').each(function (){
            var $this = $(this);
            var uploadInst = U.render({
                elem: this
                ,url: '/api/imgbed?type='+$this.data('type')
                ,accept: 'images'
                ,acceptMime: 'images/*'
                ,exts: 'jpg|png|gif|bmp'
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        var img = '<img src="'+result+'" style="width: 100%" alt="preview" />';
                        $this.parent().find('.preview').html(img);
                    });

                    E.progress('progress_'+$this.data('type'), '0%'); //进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code === 0){
                        layer.msg('上传失败');
                        $this.parent().find('.preview').html('请重新点击下方按钮选择需要上传的图片'); //置空上传失败的状态
                        return false;
                    }
                    //上传成功的一些操作
                    var src = res.data.src;
                    $this.parent().parent().find('.image-url').html(src);
                    $this.parent().parent().find('.bbcode').html('[url='+src+'][img]'+src+'[/img][/url]');
                    $this.parent().parent().find('.html').html('<a href="'+src+'" target="_blank"><img src="'+src+'" /></a>');
                    $this.parent().parent().find('.markdown').html('!['+src+']('+src+')');

                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    layer.confirm('<span style="color: #FF5722;">上传失败</span>，是否重试？',function (index){
                        uploadInst.upload();
                        layer.close(index);
                    });
                }
                //进度条
                ,progress: function(n, index, e){
                    E.progress('progress_'+$this.data('type'), n + '%'); //可配合 layui 进度条元素使用
                    if(n === 100){
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });
        });
    });
</script>